<template><!-- 自定义组件 底部导航栏-->
  <view class="flex flex-wrap diygw-col-24 justify-around diygw-bottom flex-clz">
    <navigator @click="changeCurrentPage(1)" url="../../pages/index/index" open-type="navigateTo" hover-class="other-navigator-hover">
      <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex2-clz">
        <text class="flex icon1 diygw-col-0 icon1-clz diy-icon-home"></text>
        <view class="diygw-col-0">
          首页
        </view>
      </view>
    </navigator>
    <view @click="changeCurrentPage(2)" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex3-clz">
      <navigator url="../../pages/article/article" open-type="navigateTo" hover-class="other-navigator-hover">
        <text class="flex icon2 diygw-col-0 icon2-clz diy-icon-discover"></text>
      </navigator>
      <navigator url="../../pages/article/article" open-type="navigateTo" hover-class="other-navigator-hover">
        <view class="diygw-col-0"> 社区 </view>
      </navigator>
    </view>

    <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-between items-center flex4-clz">
      <navigator url="../../pages/article/article" open-type="navigateTo" hover-class="other-navigator-hover">
        <text class="flex icon3 diygw-col-0 green icon3-clz tiaodong diy-icon-cameraadd"></text>
      </navigator>
      <navigator url="../../pages/article/article" open-type="navigateTo" hover-class="other-navigator-hover">
        <view class="diygw-col-0">
          发现
        </view>
      </navigator>
    </view>
    <view @click="changeCurrentPage(4)" class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex1-clz">
      <navigator url="../../pages/message/message" open-type="navigateTo" hover-class="other-navigator-hover">
        <text class="flex icon diygw-col-0 icon-clz diy-icon-message"></text>
      </navigator>
      <navigator @click="changeCurrentPage(5)" url="../../pages/message/message" open-type="navigateTo" hover-class="other-navigator-hover">
        <view class="diygw-col-0 text-clz"> 10 </view>
        <view class="diygw-col-0">
          消息
        </view>
      </navigator>
    </view>
    <view class="flex flex-wrap diygw-col-0 flex-direction-column items-center flex5-clz">
      <navigator url="../../pages/user/user" open-type="navigateTo" hover-class="other-navigator-hover">
        <text class="flex icon4 diygw-col-0 icon4-clz diy-icon-people"></text>
      </navigator>
      <navigator url="../../pages/user/user" open-type="navigateTo" hover-class="other-navigator-hover">

        <view class="diygw-col-0">
          <!-- 页面跳转 -->
          我的
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
  export default {
    name: "com-tabber",
    data() {
      return {
        currentTag : 1
      };
    },
    onReady() {},
    onLoad(){
      console.log('当前tag'+this.currentTag);
    },
    onShow(){
      console.log('当前tag'+this.currentTag);
    },
    methods: {
      changeCurrentPage(tag){
        this.currentTag = tag;
        //考虑使用LocalStorge
        console.log(this.currentTag);
      }
    }
  };
</script>
<style lang="scss">
  @import '../../common/diygw-ui/iconfont.scss';
  @import '../../common/diygw-ui/animate.css';
  @import '../../common/diygw-ui/index.scss';

  .flex-clz {
    padding-top: 2px;
    box-shadow: 0px 1px 4px 2px rgba(31, 31, 31, 0.16);
    overflow: visible;
    left: 0px;
    bottom: 0px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
  }

  .icon1-clz {
    color: #767272;
  }

  .icon1 {
    font-size: 32px;
  }

  .icon2-clz {
    color: #767272;
  }

  .icon2 {
    font-size: 32px;
  }

  .flex4-clz {
    margin-left: 0px;
    margin-top: -18px;
    margin-bottom: 0px;
    margin-right: 0px;
  }

  .icon3-clz {
    background-color: #f1f1f1;
    padding-top: 8px;
    border-bottom-left-radius: 1000px;
    overflow: hidden;
    padding-left: 8px;
    padding-bottom: 8px;
    border-top-left-radius: 1000px;
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
    padding-right: 8px;
  }

  @keyframes tiaodong {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-0.8rem);
    }
  }

  .tiaodong {
    animation: tiaodong 3s ease-in-out infinite;
  }

  .icon3 {
    font-size: 32px;
  }

  .icon-clz {
    color: #767272;
  }

  .icon {
    font-size: 32px;
  }

  .text-clz {
    padding-top: 2px;
    border-bottom-left-radius: 60px;
    z-index: 1;
    color: #ffffff;
    padding-left: 3px;
    font-size: 10rpx !important;
    padding-bottom: 2px;
    border-top-right-radius: 60px;
    right: -5px;
    background-color: #ff0000;
    overflow: hidden;
    top: -5px;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    position: absolute;
    padding-right: 3px;
  }

  .icon4-clz {
    color: #767272;
  }

  .icon4 {
    font-size: 32px;
  }

  .flex15-clz {
    margin-left: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    width: calc(100% - 10px - 10px) !important;
    border-top-left-radius: 10px;
    margin-top: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
  }

  .noticebar1-clz {
    top: 0px;
    left: 0px;
    position: absolute;
  }

  .flex19-clz {
    z-index: 100;
  }

  .flex23-clz {
    padding-top: 10px;
    border-bottom-left-radius: 16px;
    z-index: 100;
    padding-left: 10px;
    padding-bottom: 10px;
    border-top-right-radius: 16px;
    margin-right: 5px;
    background-color: #f8f8f8;
    margin-left: 15px;
    overflow: hidden;
    width: calc(50% - 15px - 5px) !important;
    border-top-left-radius: 16px;
    margin-top: 15px;
    border-bottom-right-radius: 16px;
    margin-bottom: 15px;
    padding-right: 10px;
  }

  .text19-clz {
    flex: 1;
  }

  .flex11-clz {
    padding-top: 10px;
    border-bottom-left-radius: 12px;
    padding-left: 5px;
    padding-bottom: 10px;
    border-top-right-radius: 12px;
    margin-right: 0px;
    background-color: #ffffff;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    border-top-left-radius: 12px;
    margin-top: 10px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0px;
    padding-right: 5px;
  }

  .flex17-clz {
    flex: 1;
  }

  .text21-clz {
    font-size: 13px !important;
  }

  .text25-clz {
    color: #bbbbbb;
  }

  .flex21-clz {
    padding-top: 10px;
    border-bottom-left-radius: 12px;
    padding-left: 5px;
    padding-bottom: 10px;
    border-top-right-radius: 12px;
    margin-right: 0px;
    background-color: #ffffff;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    border-top-left-radius: 12px;
    margin-top: 10px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0px;
    padding-right: 5px;
  }

  .flex25-clz {
    flex: 1;
  }

  .text26-clz {
    font-size: 13px !important;
  }

  .text29-clz {
    color: #bbbbbb;
  }

  .flex20-clz {
    padding-top: 10px;
    border-bottom-left-radius: 12px;
    padding-left: 5px;
    padding-bottom: 10px;
    border-top-right-radius: 12px;
    margin-right: 0px;
    background-color: #ffffff;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    border-top-left-radius: 12px;
    margin-top: 10px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0px;
    padding-right: 5px;
  }

  .flex22-clz {
    flex: 1;
  }

  .text22-clz {
    font-size: 13px !important;
  }

  .text27-clz {
    color: #bbbbbb;
  }

  .flex27-clz {
    margin-left: 5px;
    border-bottom-left-radius: 16px;
    z-index: 100;
    overflow: hidden;
    width: calc(50% - 5px - 10px) !important;
    border-top-left-radius: 16px;
    margin-top: 15px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    margin-bottom: 15px;
    margin-right: 10px;
  }

  .flex24-clz {
    background-color: #f8f8f8;
    padding-top: 10px;
    border-bottom-left-radius: 16px;
    z-index: 100;
    overflow: hidden;
    padding-left: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    padding-right: 10px;
  }

  .text28-clz {
    flex: 1;
  }

  .flex32-clz {
    padding-top: 10px;
    border-bottom-left-radius: 12px;
    padding-left: 5px;
    padding-bottom: 10px;
    border-top-right-radius: 12px;
    margin-right: 0px;
    background-color: #ffffff;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    border-top-left-radius: 12px;
    margin-top: 10px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0px;
    padding-right: 5px;
  }

  .flex34-clz {
    flex: 1;
  }

  .text35-clz {
    font-size: 13px !important;
  }

  .text37-clz {
    color: #bbbbbb;
  }

  .flex26-clz {
    background-color: #f8f8f8;
    padding-top: 10px;
    border-bottom-left-radius: 16px;
    z-index: 100;
    overflow: hidden;
    padding-left: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    padding-right: 10px;
  }

  .text30-clz {
    flex: 1;
  }

  .flex29-clz {
    padding-top: 10px;
    border-bottom-left-radius: 12px;
    padding-left: 5px;
    padding-bottom: 10px;
    border-top-right-radius: 12px;
    margin-right: 0px;
    background-color: #ffffff;
    margin-left: 0px;
    overflow: hidden;
    width: 100% !important;
    border-top-left-radius: 12px;
    margin-top: 10px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0px;
    padding-right: 5px;
  }

  .flex31-clz {
    flex: 1;
  }

  .text32-clz {
    font-size: 13px !important;
  }

  .text34-clz {
    color: #bbbbbb;
  }

  .container18836 {
    padding-left: 0px;
    padding-right: 0px;

    font-size: 12px;
  }

  .container18836 {}
</style>